<template>
  <div class="container">
    <el-card :body-style="{padding:'15px 20px 0px 15px'}">
      <div v-if="pageparams.breadName" slot="header" class="clearfix" style="{padding:10px 20px}">
        <bread :name="pageparams.breadName" />
      </div>
      <el-row type="flex">
        <el-col>
          <el-form :inline="true" :model="pageparams" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="pageparams.tagName" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="pageparams.state" placeholder="请选择">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="7" class="addCate">
          <el-button v-if="pageparams.breadName" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
          <el-button type="success" icon="el-icon-edit" @click="addNewCate">新增标签</el-button>
        </el-col>
      </el-row>
      <div class="total">
        <i class="el-icon-info " />
        数据一共{{ total }}条
      </div>
      <el-table
        :data="tableData"
        :border="false"
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="180"
        />
        <el-table-column
          prop="tagName"
          label="标签名称"
          width="200"
        />
        <el-table-column
          prop="creatorID"
          label="创建者"
          width="110"
        >
          <template slot-scope="scoped">
            {{ formatRole(scoped.row.creatorID) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="250"
        >
          <template slot-scope="scoped">
            {{ formatTime(scoped.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="200"
        >
          <template slot-scope="scoped">
            {{ formatStatus(scoped.row.state) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleClick(scope.row)">{{ formatButton(scope.row.state) }}</el-button>
            <el-button type="text" size="medium" :disabled="scope.row.state === 1 ? true : false" @click="edit(scope.row.id)">修改</el-button>
            <el-button type="text" size="medium" :disabled="scope.row.state === 1 ? true : false" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="page"
        :page-sizes="[5,10]"
        :current-page="pageparams.page"
        :page-size="pageparams.pagesize"
        :total="total"
        layout="prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 弹出框 -->
    <el-dialog
      :visible.sync="showDialog"
      :title="isEdit ? '编辑' : '添加'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      @close="close"
    >
      <sonDialog v-if="showDialog" ref="refDialog" :subject-i-d="pageparams.subjectID" :bread-name="pageparams.breadName" :cur-id="curId" :is-edit="isEdit" @close="close" />
    </el-dialog>
  </div>
</template>

<script>
import sonDialog from '@/module-hmmm/components/tags-add'
import bread from '@/components/Breadcrumb/myBread'
import { list, changeState, remove } from '@/api/hmmm/tags'
import baseApi from '@/api/base/myBaseApi'
import moment from 'moment'
// 解构文件
const { status, role, status2 } = baseApi
console.log(status2)
// 状态
const statusList = status.reduce((acc, cur) => { // 1:启用 0:禁用
  acc[cur.id] = cur.value
  return acc
}, {})
// 角色
const roleList = role.reduce((acc, cur) => {
  acc[cur.id] = cur.value
  return acc
}, {})
// 按钮
const buttonStatus = status2.reduce((acc, cur) => {
  acc[cur.id] = cur.value
  return acc
}, {})
export default {
  components: {
    bread,
    sonDialog
  },
  data() {
    return {
      tableData: [],
      pageparams: {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: null,
        breadName: '',
        subjectID: ''
      },
      total: null,
      disabled: false,
      showDialog: false,
      isEdit: false,
      curId: null
    }
  },
  created() {
    this.fetchCateList()
    this.getRouteMsg()
  },
  methods: {
    // 获取路由信息
    getRouteMsg() {
      console.log(this.$route)
      this.pageparams.subjectID = this.$route.query.id
      this.pageparams.breadName = this.$route.query.name
    },
    // 修改状态
    async handleClick(row) {
      try {
        row.state === 1 ? row.state = 0 : row.state = 1
        await changeState({ id: row.id, state: row.state })
        this.$message.success('修改状态成功')
        this.fetchCateList()
        console.log(row.state)
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 格式化状态
    formatStatus(val) {
      return statusList[val]
    },
    // 格式化按钮
    formatButton(val) {
      return buttonStatus[val]
    },
    // 格式化角色
    formatRole(val) {
      return roleList[val]
    },
    // 格式化时间
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取列表
    async fetchCateList() {
      const res = await list(this.pageparams)
      console.log('标签列表', res)
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    handleCurrentChange(val) {
      this.pageparams.page = val
      this.fetchCateList()
    },
    handleSizeChange(val) {
      this.pageparams.pagesize = val
      this.fetchCateList()
    },
    // 清除
    clear() {
      this.pageparams.tagName = ''
      this.pageparams.state = null
    },
    // 查询
    onSubmit() {
      this.fetchCateList()
    },
    // 修改
    edit(id) {
      this.isEdit = true
      this.showDialog = true
      this.curId = id
    },
    // 添加目录
    addNewCate() {
      this.showDialog = true
    },
    // 删除
    del(id) {
      this.$confirm('确定删除嘛？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await remove({ id: id })
        this.$message.success('删除成功')
        this.fetchCateList()
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 关闭弹窗
    close() {
      this.isEdit = false
      this.showDialog = false
      this.fetchCateList()
      this.$refs.refDialog.reset()
    }

  }

}
</script>

<style scoped lang='scss'>
::v-deep .el-card__header {
  padding: 0px  20px;
}
.addCate {
  text-align: right;
}
.total {
  color: #909399;
  background-color: #f4f4f5;
  height: 35px;
  line-height: 35px;
  margin-bottom: 10px;
  padding-left: 10px;
  border-radius: 5px;
}
.page {
  margin: 15px 0px;
  float: right;
}
.clearfix {
  padding-top: 10px;
  height: 35px;
  line-height: 35px;
}

</style>
